<template>
  <div id="loginOutBox">
    <div class="loginBox">
      <h1>登录</h1>
      <el-form :rules="rules" class="form" ref="form" :model="form">
        <el-form-item label="" prop="account">
          <span class="iconfont icon-yonghu"></span>
          <el-input v-model="form.account"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
          <span class="iconfont icon-mima1"></span>
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="onSubmit">登录</el-button>
          <el-button @click="form = {}">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Api from "../api/login.js";
// import { reactive, toRefs} from "vue";
export default {
  data() {
    return {
      form: {
        account: "",
        password: "",
      },
      rules: {
        account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          var res = await Api.login_Api({
            userId: this.form.account,
            password: this.form.password,
          });
          let { code, msg } = res;
          if (code == "SUCCESS") {
            sessionStorage.setItem("user",JSON.stringify(res.result))
            sessionStorage.setItem("token", 'eg:token');
            this.$store.commit("SAVEUSERINFO",res.result);
            this.$router.push("/home");
          }
        } else {
          return;
        }
      });
    },
  },
  mounted() {},
  created() {
    // 回车触发登录事件
    var that = this;
    document.onkeydown = function (e) {
      var key = window.event.keyCode;
      if (key === 13) {
        that.onSubmit(); // 触发事件
      }
    };
  },
};
</script>

<style lang="less" scoped>
#loginOutBox {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("~@/assets/imgs/1.jpg") no-repeat;
  background-size: 100% 100%;
}
.loginBox {
  width: 450px;
  height: 250px;
  background-color: rgba(206, 203, 203, 0.6);
  border: 0.5px solid rgb(128, 126, 126);
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  h1 {
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    font-weight: 600;
    color: #444;
  }
  :deep(.form) {
    width: 300px;
    margin: 25px auto;
    .el-form-item {
      position: relative;
      .iconfont {
        font-size: 18px;
        color: rgb(102, 101, 101);
        position: absolute;
        top: 0;
        left: 10px;
        z-index: 100;
      }
      .el-button:first-child {
        background-color: #24aee9;
        border: none;
      }
    }
    .btn {
      text-align: center;
    }
    .el-input__inner {
      background-color: #fff;
      padding-left: 40px;
      border-color: #aaa;
    }
  }
}
</style>